import TodoList from './TodoList'

/**
 * 使用 Context + useContext 改造 todos 案例
 * 目标: 实现 App 组件和 Todolist 组件之间的跨组件传递数据(比如，todos 任务数据)
 * 组件结构改动:
 *  原来: App -> TodoList
 *  现在: App -> MainSection -> TodoList
 * 说明
 *    App·和 TodoList 组件分别在不同的文件中
 *    但它们必须基于同一个 Context·才能使用跨组件传递数据
 *    因此，我们创建一个单独的文件，来提供· context
 *    由·App和 TodoList 分别导入即可
 * 步骤
 * 1 在 src 中创建 TodoContext.ts 文件
 * 2 在 TodoContext.ts 文件中，创建 TodoContext 对象并导出
 * 3 在App 组件中导入 TodoContext 并使用 Provider 提供 value 数据
 * 4 在 TodoList 组件中导入 TodoContext 并使用
 *    useContext 获取共享数据
 */

const MainSection = () => {
  return (
    <section className='main'>
      <input id='toggle-all' className='toggle-all' type='checkbox' />
      <label htmlFor='toggle-all'>Mark all as complete</label>
      {/* 列表组件 */}
      <TodoList />
    </section>
  )
}

export default MainSection
